﻿<!DOCTYPE html>
<html>
  <head>
    <title>流动人口信息统计</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="resources/data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="resources/files/流动人口信息统计/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/echarts/echarts.min.js"></script>
    <script>
    var provinceCode = location.href.split("provinceCode=")[1];//
    $(function() {

        loadNowCityByProvince();
        getData()
    })
        function getPic(data) {
            var dom = document.getElementById("main");
             var myChart = echarts.init(dom);
             var app = {};
             option = null;
             option = {
                 title: {
                     text: '流动人口地域统计',
                     subtext: '真实有效',
                     left: 'center'
                 },
                 color: ['#3398DB'],
                 tooltip: {
                     trigger: 'axis',
                     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                         type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                     }
                 },
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
                 xAxis: [
                     {
                         type: 'category',
                         data: data.name,
                         axisTick: {
                             alignWithLabel: true
                         }
                     }
                 ],
                 yAxis: [
                     {
                         type: 'value'
                     }
                 ],
                 series: [
                     {
                         name: '人数',
                         type: 'bar',
                         barWidth: '60%',
                         data: data.value
                     }
                 ]
             };
             if (option && typeof option === "object") {
                 myChart.setOption(option, true);
             }

        }
    function getData() {
        if($("#u1975_input").val()>$("#u1976_input").val()){
            alert("请选择正确的时间段");
            return;
        }
        var formData = new FormData();
        if($("#u1975_input").val()!=""&&$("#u1975_input").val()!=null){
            formData.append("startTime",$("#u1975_input").val());
        }
        if($("#u1976_input").val()!=""&&$("#u1976_input").val()!=null){
            formData.append("endTime",$("#u1976_input").val());
        }
        formData.append("nowInCity",$("#u2003_input").val());
        formData.append("nowInCounty",$("#u2005_input").val());
        formData.append("nowInTownship",$("#u2006_input").val());
        $.ajax({
            url:"/getData",
            data:formData,
            type:"post",
            async:false,
            processData:false,
            contentType:false,
            success:function(data) {
                console.log(data);
                getPic(data);
            }
        })
    }
     /**
     * 现居
     * 根据县码获得所有镇
     */
    function loadNowTownshipByCounty() {
        var county = $("#u2005_input").val();
        $.ajax({
            url:"/loadNowTownshipByCounty",
            dataType:"json",
            data:{county:county},
            type:"post",
            async:false,
            success:function(data) {
                var township = $("#u2006_input");
                township.empty();
                var html = "<option value='' >请选择镇：</option>";
                $.each(data,function(index,item) {
                    html+="<option value='"+item.code+"' >"+item.name+"</option>"
                });
                township.append(html);
            }
        })
    }
    /**
     * 现居
     * 根据市码获得所有县
     */
    function loadNowCountyByCity() {
        var city = $("#u2003_input").val();
        $.ajax({
            url:"/loadNowCountyByCity",
            dataType:"json",
            data:{city:city},
            type:"post",
            async:false,
            success:function(data) {
                var county = $("#u2005_input");
                county.empty();
                var html = "<option value='' >请选择区：</option>";
                $.each(data,function(index,item) {
                    html+="<option value='"+item.code+"' >"+item.name+"</option>"
                });
                county.append(html);
            }
        })
    }
    /**
    * 现居
    * 根据省码获得所有市
    */
    function loadNowCityByProvince() {
        $.ajax({
            url:"/loadNowCityByProvince",
            dataType:"json",
            data:{province:provinceCode},
            type:"post",
            async:false,
            success:function(data) {
                var city = $("#u2003_input");
                city.empty();
                var html = "<option value='' >请选择市：</option>";
                $.each(data,function(index,item) {
                    html+="<option value='"+item.code+"' >"+item.name+"</option>"
                });
                city.append(html);
            }
        })
    }
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u1969" class="ax_default box_1">
        <div id="u1969_div" class=""></div>
        <div id="u1969_text" class="text ">
          <p><span>流动人口服务管理系统</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1970" class="ax_default box_3">
        <div id="u1970_div" class=""></div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1971" class="ax_default box_1">
        <div id="u1971_div" class=""></div>
        <div id="u1971_text" class="text ">
          <p><span>注册信息审核</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1972" class="ax_default box_1">
        <div id="u1972_div" class=""></div>
        <div id="u1972_text" class="text ">
          <p><span>流动人口信息管理</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1973" class="ax_default box_1">
        <div id="u1973_div" class=""></div>
        <div id="u1973_text" class="text ">
          <p><span>账户管理</span></p>
        </div>
      </div>

      <!-- Unnamed (提交按钮) -->
      <div id="u1974" onclick="getData()" class="ax_default html_button">
        <input id="u1974_input" type="submit"  value="搜索"/>
      </div>

      <!-- Unnamed (文本框) -->
      <div id="u1975" class="ax_default text_field">
        <input id="u1975_input" type="date" value=""/>
      </div>

      <!-- Unnamed (文本框) -->
      <div id="u1976" class="ax_default text_field">
        <input id="u1976_input" type="date" value=""/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1977" class="ax_default label">
        <div id="u1977_div" class=""></div>
        <div id="u1977_text" class="text ">
          <p><span>从</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1978" class="ax_default label">
        <div id="u1978_div" class=""></div>
        <div id="u1978_text" class="text ">
          <p><span>至</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2002" class="ax_default box_1">
        <div id="u2002_div" class=""></div>
        <div id="u2002_text" class="text ">
          <p><span>流动人口信息统计</span></p>
        </div>
      </div>

      <!-- Unnamed (下拉列表框) -->
      <div id="u2003" class="ax_default droplist">
        <select id="u2003_input" onchange="loadNowCountyByCity()">
          <option value="">请选择</option>
        </select>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2004" class="ax_default label">
        <div id="u2004_div" class=""></div>
        <div id="u2004_text" class="text ">
          <p><span>区域</span></p>
        </div>
      </div>

      <!-- Unnamed (下拉列表框) -->
      <div id="u2005" class="ax_default droplist">
        <select id="u2005_input" onchange="loadNowTownshipByCounty()">
          <option selected value="">请选择</option>
        </select>
      </div>

      <!-- Unnamed (下拉列表框) -->
      <div id="u2006" class="ax_default droplist">
        <select id="u2006_input">
          <option value="">请选择</option>
        </select>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2007" class="ax_default box_1">
        <div id="u2007_div" class=""></div>
        <div id="u2007_text" class="text ">
          <p><span>登记信息审核</span></p>
        </div>
      </div>
    </div>
    <div id="main" style="width: 800px;height: 500px;position: absolute;top: 250px;left: 300px; "></div>
  </body>
</html>
